<template>
    <div>
        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" unique-opened
            :background-color="theme.backgroundColor" :text-color="theme.textColor" router
            :active-text-color="theme.activeTextColor">

            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>系统设置</span>
                </template>
                <el-menu-item index="1-1" route="/systemConfig">菜单主题设置</el-menu-item>
            </el-submenu>

            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>信用信息披露</span>
                </template>
                <el-menu-item index="2-1" route="/disclosure">信用披露处理</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>报表处理</span>
                </template>
                <el-menu-item index="3-1" route="/report">报表处理</el-menu-item>
            </el-submenu>

            <!-- 测试节点（正式环境删除） -->
            <el-submenu index="99">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>测试节点</span>
                </template>
                <el-menu-item index="99-1" route="/helloWorld">HelloWorld</el-menu-item>
            </el-submenu>

            <!-- <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>主菜单3</span>
                </template>
                <el-menu-item index="3-1">一级子菜单1</el-menu-item>
                <el-menu-item index="3-2">一级子菜单2</el-menu-item>
                <el-menu-item index="3-3">一级子菜单3</el-menu-item>
                <el-submenu index="3-4">
                    <template slot="title">一级子菜单4</template>
                    <el-menu-item index="3-4-1">二级子菜单1</el-menu-item>
                    <el-menu-item index="3-4-2">二级子菜单2</el-menu-item>
                    <el-menu-item index="3-4-3">二级子菜单3</el-menu-item>
                </el-submenu>
            </el-submenu> -->
        </el-menu>
    </div>
</template>

<script>
// 菜单
// 导入mapState映射vuex store的插件
import { mapState } from 'vuex';
export default {
    name: 'Nav',
    data() {
        return {
            msg: 'QuickSand',
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },

    },
    computed: {
        // 引入vuex的store中配置的菜单主题颜色theme对象
        ...mapState(['theme'])
    },
    mounted() {

    },
    beforeDestroy() {

    }

}
</script>

<style scoped>
</style>